<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>直尺</title>
	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>
	<script src="../lib/easeljs-NEXT.js"></script>   
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->
	<script src="../_assets/libs/preloadjs-NEXT.min.js"></script>

	<script id="editable">
    var stage, w, h;
    var update = true;
	var rulerContainer;
	var rulerRContainer;
	var rulerW;//尺子默认宽度
    var dynamicRulerW;//尺子动态宽度
    var moveImg;
    var rulerLImg;
    var rulerRImg;
    var rotateImg;
    var angle = 0;
    var cos = 1; 

    function init() {

        stage = new createjs.Stage("rulerCanvas");
        w = stage.canvas.width;
        h = stage.canvas.height;
        stage.enableMouseOver(10);
        manifest = [
	            {src: "del1.png", id: "del"},//删除按钮
	            {src: "move2.png", id: "move"},//伸缩按钮
	            {src: "rotate2.png", id: "rotate"},//旋转按钮
	            {src: "rulerR3.png", id: "ruler-right"},//直尺右部
	            {src: "ruler3.png", id: "ruler-left"}//直尺左部
		];


        loader = new createjs.LoadQueue(false);
		loader.addEventListener("complete", handleComplete);
		loader.loadManifest(manifest, true, "images/");
    }

    function handleComplete() {

        //尺子左部
        var rulerLImg = loader.getResult("ruler-left");
        //rulerW=rulerImgL.width-300;
        dynamicRulerW=rulerW=rulerLImg.width-580;
		rulerL = new createjs.Shape();
		rulerL.graphics.beginBitmapFill(rulerLImg).drawRect(0, 0,rulerW,rulerLImg.height );
        rulerL.cursor = "pointer";
        rulerL.addEventListener("mousedown",function(evt) {
				// this.parent.addChild(this);
				rulerContainer.offset = {x: rulerContainer.x - evt.stageX, y: rulerContainer.y - evt.stageY};
			});

        rulerL.addEventListener("pressmove",function (evt) {
				rulerContainer.x = evt.stageX + rulerContainer.offset.x;
				rulerContainer.y = evt.stageY + rulerContainer.offset.y;
				update = true;
		});
        rulerL.cache(0, 0, w, h);

        //尺子右部
        var rulerRImg = loader.getResult("ruler-right");
		rulerR = new createjs.Shape();
		rulerR.graphics.beginBitmapFill(rulerRImg).drawRect(0, 0,rulerRImg.width,rulerRImg.height );
        rulerR.x = rulerW;
		rulerR.cursor = "pointer";
        rulerR.cache(0, 0, w, h);

        rulerR.addEventListener("mousedown",function(evt) {
				// this.parent.addChild(this);
				rulerContainer.offset = {x: rulerContainer.x - evt.stageX, y: rulerContainer.y - evt.stageY};
			});

        rulerR.addEventListener("pressmove",function (evt) {
				rulerContainer.x = evt.stageX + rulerContainer.offset.x;
				rulerContainer.y = evt.stageY + rulerContainer.offset.y;
				update = true;
		});

		//伸缩按钮
		moveImg = loader.getResult("move");
		moveBut = new createjs.Shape();
		moveBut.graphics.beginBitmapFill(moveImg).drawRect(0,0,moveImg.width,moveImg.height);
		moveBut.x = rulerW;

		moveBut.y = rulerLImg.height/2 - moveImg.height/2;
		moveBut.cache(0,0,w,h);
		moveBut.cursor = "pointer";

		
		moveBut.addEventListener("mousedown",function(evt) {
			//this.offset = {x: rulerContainer.x - evt.stageX + dynamicRulerW, y: this.y - evt.stageY};//
			//rulerRContainer.offset = {x: rulerRContainer.x - evt.stageX, y: rulerRContainer.y - evt.stageY};
			mouseOldX = evt.stageX;
			oldOffset = rulerRContainer.x - (rulerContainer.x + dynamicRulerW) - moveImg.width/2 ;
			rulerRContainer.offset = {x:rulerRContainer.x - (rulerContainer.x + dynamicRulerW) - moveImg.width/2 , y: rulerRContainer.y - evt.stageY};

		});

		moveBut.addEventListener("pressmove",function(evt){
			
			if(rulerContainer.x < evt.stageX){
				if(evt.stageX - moveImg.width/2 - rulerContainer.x >= rulerLImg.width - 10 || evt.stageX - moveImg.width/2 - rulerContainer.x <= rulerW - 250 ){
					return;
				}
				//{
				offset = (evt.stageX - rulerW - rulerContainer.x - moveImg.width/2);	
				dynamicRulerW = (rulerW + offset);

				rulerRContainer.x = (evt.stageX + (rulerRContainer.offset.x) );//重新计算尺子右边坐标

				rulerContainer.removeChildAt(0);//移除尺子左部
				rulerL = new createjs.Shape();//重新渲染尺子左部nnq
				rulerL.graphics.beginBitmapFill(rulerLImg).drawRect(0, 0,dynamicRulerW,rulerLImg.height);
				rulerL.cursor = "pointer";
				rulerL.addEventListener("mousedown",function(evt) {
					// this.parent.addChild(this);
					rulerContainer.offset = {x: rulerContainer.x - evt.stageX, y: rulerContainer.y - evt.stageY};
				});

		        rulerL.addEventListener("pressmove",function (evt) {
						rulerContainer.x = evt.stageX + rulerContainer.offset.x;
						rulerContainer.y = evt.stageY + rulerContainer.offset.y;
						update = true;
				});

				rulerContainer.addChildAt(rulerL,0);		
				rulerContainer.updateCache();
				update = true;
			}
			else{
				if(-(evt.stageX - moveImg.width/2 - rulerContainer.x )>= rulerLImg.width - 10 || -(evt.stageX - moveImg.width/2 - rulerContainer.x) <= rulerW - 250 ){
					return;
				}

				offset = (evt.stageX - mouseOldX);	

				dynamicRulerW = (rulerW - offset);

				rulerRContainer.x = -offset//(evt.stageX + moveImg.width/2 );//重新计算尺子右边坐标

				rulerContainer.removeChildAt(0);//移除尺子左部
				rulerL = new createjs.Shape();//重新渲染尺子左部nnq
				rulerL.graphics.beginBitmapFill(rulerLImg).drawRect(0, 0,dynamicRulerW,rulerLImg.height);

				rulerL.cursor = "pointer";
				rulerL.addEventListener("mousedown",function(evt) {
					// this.parent.addChild(this);
					rulerContainer.offset = {x: rulerContainer.x - evt.stageX, y: rulerContainer.y - evt.stageY};
				});

		        rulerL.addEventListener("pressmove",function (evt) {
						rulerContainer.x = evt.stageX + rulerContainer.offset.x;
						rulerContainer.y = evt.stageY + rulerContainer.offset.y;
						update = true;
				});

				rulerContainer.addChildAt(rulerL,0);		
				rulerContainer.updateCache();
				update = true;
			}


		})


        
		//旋转按钮
		rotateImg = loader.getResult("rotate");
		rotateBut = new createjs.Shape();
		rotateBut.graphics.beginBitmapFill(rotateImg).drawRect(0,0,rotateImg.width,rotateImg.height);
		rotateBut.x = rulerW + moveImg.width + 20;

		rotateBut.y = rulerLImg.height/2 - rotateImg.height/2;
		rotateBut.cache(0,0,w,h);
		rotateBut.cursor = "pointer";


		rotateBut.addEventListener("mousedown",function(evt) {
			// this.parent.addChild(this);
			rotateBut.old = {x: evt.stageX, y: evt.stageY};

			
		});

		rotateBut.addEventListener("pressmove",function(evt){
			//rulerContainer.regX = rulerContainer.x ;
			rotateBut.new = {x: evt.stageX, y: evt.stageY};
			let anglex = rotateBut.new.x;
			let angley = rotateBut.new.y - rotateBut.old.y;
			let anglez = Math.sqrt((anglex*anglex + angley*angley));
			
			var distance = rulerLImg.height/2;
			if (evt.stageX > rulerContainer.x) {
				var R = Math.atan((evt.stageY - rulerContainer.y -distance)/(evt.stageX - rulerContainer.x));
				angle = R * 180 / Math.PI; 
				rulerContainer.rotation = angle; 
				update = true;
			}
			else{
				var R = Math.atan((rulerContainer.y - distance - evt.stageY)/(rulerContainer.x - evt.stageX))
				angle = 180 + R * 180 / Math.PI; 
				rulerContainer.rotation = angle;

				update = true;
			};

		})




		// //删除按钮
		// delImg = loader.getResult("del");
		// delBut = new createjs.Shape();
		// delBut.graphics.beginBitmapFill(delImg).drawRect(0,0,delImg.width,delImg.height);
		// delBut.x = rulerW + moveImg.width + rotateImg.width + 40;

		// delBut.y = rulerLImg.height/2 - delImg.height/2;
		// delBut.cache(0,0,w,h);
		// delBut.cursor = "pointer";

		// delBut.on("mousedown",function(evt) {
		// 	window.opener=null;
		// 	  window.open('','_self');
		// 	  window.close();
						
		// });

		//尺子右部容器
        rulerRContainer = new createjs.Container();
        rulerRContainer.addChild(rulerR, moveBut ,rotateBut);
		

		//尺子容器
        rulerContainer = new createjs.Container();
        rulerContainer.addChild(rulerL, rulerRContainer);
        rulerContainer.x = 50;
        rulerContainer.y = h/2 - rulerLImg.height/2;
        rulerContainer.cache(0,0,w,h);//增加这句代码之后图片不能运行单独事件

        // rulerContainer.addEventListener("mousedown", down, false);
        // rulerContainer.addEventListener("pressmove", pressmove, false);

        createjs.Touch.enable(stage);
        createjs.Ticker.addEventListener("tick", tick);
        stage.addChild(rulerContainer);

    }

    function tick(event) {
		if (update) {
			update = false; // only update once
			stage.update(event);
		}
	}
 

	</script>

</head>

<body onload="init();">
	<div>
		<canvas id="rulerCanvas" width="1560" height="800" style="background: white"></canvas>
	</div>
</body>
</html>